<template>
  <div>
    <div class="boss">
      <!-- 头部标签 -->
      <head-page
        :title="`${this.$route.query.index}.${this.$route.query.title}`"
        id="backstyle"
        style="position: relative"
      ></head-page>

      <!-- 版心区域 -->
      <div class="center">
        <!-- 底部区域 -->
        <div class="bottom">
          <!-- <h3>{{ this.$route.query.index }}.{{ this.$route.query.title }}</h3> -->
          <!-- 内容区域 -->
          <div class="context">
            <van-form
              validate-first
              ref="person"
              id="person"
              @submit="submit"
              @failed="failed"
            >
              <!-- 姓名 -->
              <van-field
                required
                name="taluserName"
                v-model="username"
                label="姓名"
                placeholder="请输入姓名"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '姓名不能为空',
                  },
                ]"
              />

              <!-- 籍贯 -->
              <van-field
                required
                readonly
                clickable
                name="taluserProvincial"
                :value="value"
                label="籍贯"
                placeholder="籍贯"
                @click="showPicker = true"
              />
              <van-popup v-model="showPicker" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columns"
                  :loading="columnsLoading"
                  value-key="provincial"
                  @confirm="onConfirm"
                  @cancel="showPicker = false"
                />
              </van-popup>
              <!-- 籍贯 -->
              <!-- <van-field
                required
                name="taluserPlace"
                v-model="native"
                label="籍贯"
                placeholder="请填写籍贯"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '籍贯不能为空',
                  },
                ]"
              /> -->
              <!-- 出生 -->
              <!-- <van-field
                required
                name="taluserAge"
                v-model="age"
                label="出生"
                placeholder="请输入出生"
                @click="showTime = true"
              /> -->
              <van-field
                required
                name="taluserAge"
                v-model="usertime"
                label="出生"
                placeholder="请输入出生"
                @click="showTime = true"
              />
              <van-popup v-model="showTime" position="bottom">
                <van-datetime-picker
                  v-model="currentDate"
                  type="date"
                  title="选择成立时间"
                  :min-date="minDate"
                  :max-date="maxDate"
                  @confirm="Chambertime"
                  @cancel="showTime = false"
                />
              </van-popup>

              <!-- 性别 -->
              <!-- 
              <van-field name="taluserSex" label="性别" required>
                <template #input>
                  <van-radio-group v-model="sex" direction="horizontal">
                    <van-radio name="男">男</van-radio>
                    <van-radio name="女">女</van-radio>
                  </van-radio-group>
                </template>
              </van-field> -->
              <!-- 身高 -->
              <van-field
                required
                name="taluserHeight"
                v-model="height"
                label="身高"
                placeholder="请输入身高"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '身高不能为空',
                  },
                ]"
              />

              <!-- 学历 -->

              <van-field
                required
                readonly
                clickable
                name="taluserStudy"
                :value="education"
                label="学历"
                placeholder="请选择学历"
                @click="educationPicker = true"
              />
              <van-popup v-model="educationPicker" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="educationColumns"
                  @confirm="educationChange"
                  @cancel="educationPicker = false"
                />
              </van-popup>
              <!-- 专业 -->
              <van-field
                required
                name="taluserMajor"
                v-model="speciality"
                label="专业"
                placeholder="请输入专业"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '专业不能为空',
                  },
                ]"
              />
              <!-- 毕业院校 -->
              <van-field
                required
                name="taluserEdu"
                v-model="experience"
                label="毕业院校"
                placeholder="请输入毕业院校"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '毕业院校不能为空',
                  },
                ]"
              />
              <!-- 婚姻 -->
              <van-field name="taluserMarriage" label="婚姻状况">
                <template #input>
                  <van-radio-group v-model="marriage" direction="horizontal">
                    <van-radio name="未婚">未婚</van-radio>
                    <van-radio name="已婚">已婚</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <!-- 工作阅历 -->
              <van-field
                required
                name="taluserJob"
                v-model="educationJob"
                label="工作阅历 "
                type="textarea"
                placeholder="请输入工作阅历 "
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '工作阅历不能为空',
                  },
                ]"
              />
              <!-- 荣誉奖项 -->
              <van-field
                required
                name="taluserAddress"
                v-model="residence"
                label="荣誉奖项"
                type="textarea"
                placeholder="请输入荣誉奖项"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '荣誉奖项不能为空',
                  },
                ]"
              />
              <!-- 特长 -->
              <van-field
                name="taluserPoint"
                v-model="feature"
                type="textarea"
                label="特长爱好"
                placeholder="请输入特长爱好"
              />
              <!-- 岗位要求 -->
              <van-field
                required
                name="taluserNeed"
                v-model="requirements"
                label="岗位要求"
                placeholder="请输入岗位要求"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '岗位要求不能为空',
                  },
                ]"
              />
              <!-- 薪酌要求 -->
              <van-field
                required
                name="taluserMoney"
                v-model="salary"
                label="薪酌要求"
                placeholder="请输入薪酌要求"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '薪酌要求不能为空',
                  },
                ]"
              />
              <!-- 创业要求 -->
              <van-field
                required
                name="taluserNation"
                v-model="nation"
                label="创业要求"
                placeholder="请填写创业要求"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '创业要求不能为空',
                  },
                ]"
              />
              <!-- 目标城市 -->
              <van-field
                required
                readonly
                clickable
                name="taluserWork"
                :value="daytime"
                label="目标城市"
                placeholder="请选择目标城市"
                @click="dayPicker = true"
              />
              <van-popup v-model="dayPicker" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="OndutyTime"
                  :loading="columncity"
                  value-key="provincial"
                  @confirm="dayChange"
                  @cancel="dayPicker = false"
                />
              </van-popup>
              <!-- 赶任时间 -->
              <van-field
                required
                name="taluserWeight"
                v-model="weight"
                label="赶任时间"
                placeholder="请输入赶任时间"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '赶任时间不能为空',
                  },
                ]"
              />
              <!-- 未来规划 -->
              <van-field
                name="taluserHope"
                v-model="future"
                type="textarea"
                label="未来规划"
                placeholder="请输入未来规划"
              />

              <!-- 人才类型 -->
              <!-- <van-field name="taluserType" label="人才类型" required>
                <template #input>
                  <van-radio-group v-model="radio" direction="horizontal">
                    <van-radio
                      :name="item.typeId"
                      v-for="(item, index) in typeList"
                      :key="index"
                      >{{ item.typeName }}</van-radio
                    >
                  </van-radio-group>
                </template>
              </van-field> -->

              <!-- 政治面貌 -->
              <!-- <van-field
                required
                name="taluserPolitices"
                v-model="identity"
                label="政治面貌"
                placeholder="请填写政治面貌"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '政治面貌不能为空',
                  },
                ]"
              /> -->

              <!-- 电子邮箱 -->
              <!-- <van-field
                required
                name="taluserEmail"
                v-model="emilt"
                label="电子邮箱"
                placeholder="请输入电子邮箱"
                :rules="[
                  {
                    required: true,
                    message: '请填写您的邮箱！',
                  },
                  {
                    pattern:
                      /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
                    message: '邮箱格式错误！',
                  },
                ]"
              /> -->

              <!-- 微信 -->
              <van-field
                required
                name="taluserPolitices"
                v-model="identity"
                label="微信号"
                placeholder="请填写微信号"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '微信号不能为空',
                  },
                ]"
              />
              <!-- 手机号 -->
              <van-field
                required
                name="taluserTel"
                v-model="phone"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[
                  {
                    required: true,
                    message: '请填写您的手机号码！',
                  },
                  {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '手机号码格式错误！',
                  },
                ]"
              />
              <!-- 备注 -->
              <van-field
                required
                name="taluserIntroduce"
                v-model="introduce"
                label="备注"
                type="textarea"
                placeholder="请输入备注"
                :rules="[
                  {
                    required: true,
                    trigger: 'onBlur',
                    message: '个人介绍不能为空',
                  },
                ]"
              />

              <!-- 是否创业 -->
              <!-- <van-field name="taluserBusiness" label="是否创业" required>
                <template #input>
                  <van-radio-group
                    v-model="Entrepreneurship"
                    direction="horizontal"
                  >
                    <van-radio name="是">是</van-radio>
                    <van-radio name="否">否</van-radio>
                  </van-radio-group>
                </template>
              </van-field> -->

              <!-- 头像照片 -->
              <van-field
                name="taluserPicUrl"
                label="头像照"
                required
                :rules="[{ required: true, message: '请上传头像照' }]"
              >
                <template #input>
                  <van-uploader
                    v-model="uploader"
                    :after-read="afterRead"
                    :before-read="beforeRead"
                    :max-count="1"
                    accept="image/*"
                  />
                </template>
              </van-field>
              <!-- 生活照片 -->
              <van-field
                name="taluserLifeUrl"
                label="生活照"
                required
                :rules="[{ required: true, message: '请上传生活照' }]"
              >
                <template #input>
                  <van-uploader
                    v-model="uploaderlift"
                    :after-read="afterReadlift"
                    accept="image/*"
                    :max-count="5"
                    :before-read="beforeRead"
                  />
                </template>
              </van-field>

              <div style="margin: 16px">
                <van-button round block type="info" native-type="submit"
                  >添加人才</van-button
                >
              </div>
            </van-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
// import axios from "axios"
import { talUser, personType, talType } from "@/api/index";
import { fileUpload, provincialList } from "@/api/common";
export default {
  data() {
    return {
      ID: this.$route.query.id, //判断标题变色
      list: [],
      educationColumns: ["高中", "本科", "大专", "研究生"],
      OndutyTime: [],
      educationPicker: false,
      dayPicker: false, //随时到岗
      username: "",
      age: "",
      sex: "", //性别
      height: "", // 身高
      weight: "", // 体重
      phone: "", // 电话
      radio: "", //人才类型
      typeList: [],
      value: "", //籍贯
      valecity: "", //目标城市
      // native: "", //籍贯
      nation: "", // 民族
      identity: "", // 政治面貌
      feature: "", // 特长
      future: "", //未来规划
      educationExperience: "", // 教育经历
      educationJob: "", // 工作经历
      residence: "", // 居住地点
      education: "", //学历
      daytime: "", //到岗时间
      marriage: "", //婚姻状况
      speciality: "", //专业
      emilt: "", //电子邮箱
      experience: "", //毕业院校
      introduce: "", //个人介绍
      requirements: "", //岗位要求
      salary: "", //薪资要求
      Entrepreneurship: "", //是否创业
      uploader: [], //头像照片
      taluserPicUrl: "",
      uploaderlift: [], //生活照片
      lifePic: [],
      showTime: false, //时间选择显示
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      columns: [],
      columnsLoading: true,
      columncity: true,
      showPicker: false,
      usertime: "", //出生时间
    };
  },
  mounted() {
    personType().then((res) => {
      let data = res.data;
      if (data.code == 200) {
        this.list = data.data;
      }
    });
    // 人才类型
    talType().then((res) => {
      let data = res.data;
      if (data.code == 200) {
        this.typeList = data.rows;
      }
    });
    provincialList().then((res) => {
      this.columns = res.data;
      this.columnsLoading = false;
      this.OndutyTime = res.data; //目标城市
      this.columncity = false;
    });
  },
  methods: {
    //跳转
    person(id) {
      if (id == "11") {
        this.$router.push("/personsix");
        this.ID = this.$route.query.id;
      } else if (id == "12" || id == "13") {
        this.$router.push({
          path: "/persontwo/personthree",
          query: {
            id: id,
          },
        });
      } else {
        this.$router.push("/personmin");
      }
    },
    //省份
    onConfirm(value) {
      this.value = value.provincial ? value.provincial : "";
      this.showPicker = false;
    },

    // 目标城市
    dayChange(val) {
      this.daytime = val.provincial ? val.provincial : "";
      this.dayPicker = false;
    },
    // 学历
    educationChange(val) {
      this.education = val;
      this.educationPicker = false;
    },
    //选择出生时间
    Chambertime(val) {
      this.usertime = this.getDateTime(val);
      this.showTime = false;
    },
    afterRead(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then((res) => {
        if (res.data.code == 200) {
          this.taluserPicUrl = res.data.data;
        }
      });
    },
    // 生活照图片上传处理
    afterReadlift(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then((res) => {
        if (res.data.code == 200) {
          this.lifePic.push(res.data.data);
        }
      });
    },
    // 头像上传后处理
    beforeRead(file) {
      if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
        this.$toast("请上传 jpg/png/jpeg 格式图片");
        return false;
      }
      let isLt1M = file.size / 1024 / 1024 <= 5;
      if (!isLt1M) {
        this.$toast("图片大小5M以内");
        return false;
      }
      return true;
    },
    //表单提交
    submit(data) {
      data.taluserPicUrl = this.taluserPicUrl;
      data.taluserType = this.$route.query.Id;
      data.taluserLifeUrl = this.lifePic.join(",");
      talUser(data).then((res) => {
        this.$toast({
          message: res.data.msg,
          icon:"fail"
        });
        if (res.data.code == 200) {
          this.lifePic = [];
          this.taluserPicUrl = "";
          this.$toast({
            message: "添加人才成功！",
            icon: "success",
          });
          // 重置表单
          document.getElementById("person").reset();
          this.uploader = [];
          this.uploaderlift = [];
          this.$refs.person.resetValidation();
        }
      });
    },
    // 提交失败回调
    failed(data) {
      this.$refs.person.scrollToField(data.errors[0].name);
    },
  },
};
</script>
  
  <style scoped>
/* 整体区域 */
.boss {
  width: 100%;
  background-color: #f0eff5;
}

/* 版心区域 */
.center {
  width: 98%;
  margin: 0 1%;
  padding-top: 0.1rem;
  /* background-color: rebeccapurple; */
}
/* 访谈和电视总区域 */
.top {
  width: 100%;
  background-color: white;
}
.wen {
  width: 100%;
  height: 25%;
  display: flex;
  justify-content: center;
}
.xian {
  width: 98%;
  height: 100%;
  display: flex;
  border-bottom: 2px solid #dad9df;
}
.le {
  width: 40%;
  height: 100%;
  line-height: 0.3rem;
  font-size: 0.18rem;
  padding-left: 0.1rem;
}
.le img {
  height: 0.3rem;
  float: right;
  padding: 0.05rem 0.1rem 0 0;
}
.xian h3 {
  width: 60%;
  height: 100%;
  font-size: 0.24rem;
  line-height: 0.4rem;
}
/* 用人单位区域 */

/* 底部区域 */
.bottom {
  width: 100%;
}

.bottom h3 {
  width: 100%;
  height: 0.35rem;
  line-height: 0.35rem;
  text-align: center;
}
/* 内容区域 */
.context {
  width: 100%;
}
.van-radio--horizontal {
  margin-right: 0.28rem;
  margin-bottom: 0.07rem;
}
::v-deep .van-field__label {
  color: #000;
}
</style>